// 常见问题页面
import Navbar from '../components/Navbar.js';
import Footer from '../components/Footer.js';
import { navigateTo } from '../router/index.js';

function FAQ() {
  const faqPage = document.createElement('div');
  faqPage.className = 'min-h-screen flex flex-col';
  
  // 创建导航栏
  const navbar = Navbar();
  faqPage.appendChild(navbar);
  
  // 页面内容
  const contentContainer = document.createElement('div');
  contentContainer.className = 'flex-grow';
  contentContainer.innerHTML = `
    
    <!-- 页面标题区 -->
    <section class="bg-gradient-to-br from-blue-50 to-indigo-50 section-padding">
      <div class="container mx-auto px-4 md:px-8 text-center">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4">常见问题</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          查找关于MSRM3网络管理系统的常见问题解答
        </p>
      </div>
    </section>
    
    <!-- 搜索问题 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <div class="max-w-2xl mx-auto">
          <div class="relative mb-12">
            <input type="text" id="faq-search" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200" placeholder="搜索常见问题...">
            <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
        </div>
        
        <!-- 问题分类 -->
        <div class="flex flex-wrap justify-center gap-4 mb-12">
          <button class="faq-category-btn active" data-category="all">
            全部问题
          </button>
          <button class="faq-category-btn" data-category="installation">
            安装部署
          </button>
          <button class="faq-category-btn" data-category="basic">
            基础操作
          </button>
          <button class="faq-category-btn" data-category="advanced">
            高级功能
          </button>
          <button class="faq-category-btn" data-category="troubleshooting">
            故障排除
          </button>
          <button class="faq-category-btn" data-category="other">
            其他问题
          </button>
        </div>
        
        <!-- 常见问题列表 -->
        <div class="max-w-3xl mx-auto space-y-6">
          <!-- 安装部署问题 -->
          <div class="faq-item" data-category="installation">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">MSRM3对系统有什么要求？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>MSRM3对系统资源要求较低，基本配置：</p>
              <ul class="list-disc ml-6 mt-2 space-y-1">
                <li>CPU：1GHz以上处理器</li>
                <li>内存：2GB以上</li>
                <li>磁盘空间：10GB以上</li>
                <li>操作系统：Windows 7及以上版本、Linux（Ubuntu 20.04+、Debian 11+、CentOS 7+等）和国产操作系统（银河麒麟、统信UOS等）</li>
                <li>浏览器：Chrome 70+、Firefox 65+、Safari 12+、Edge 80+</li>
              </ul>
            </div>
          </div>
          
          <div class="faq-item" data-category="installation">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">如何在Linux系统上安装MSRM3？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>在Linux系统上安装MSRM3的步骤如下：</p>
              <ol class="list-decimal ml-6 mt-2 space-y-1">
                <li>访问<a href="/download" class="text-primary hover:underline">下载中心</a>，下载适用于Linux系统的安装包</li>
                <li>打开终端，进入下载目录</li>
                <li>执行命令：<code class="bg-gray-100 px-2 py-1 rounded">chmod +x MSRM3-linux-x64-v3.25.920.1</code> 赋予执行权限</li>
                <li>执行命令：<code class="bg-gray-100 px-2 py-1 rounded">./MSRM3-linux-x64-v3.25.920.1</code> 启动MSRM3</li>
                <li>在浏览器中访问：<code class="bg-gray-100 px-2 py-1 rounded">http://localhost:8888</code> 打开管理界面</li>
              </ol>
            </div>
          </div>
          
          <div class="faq-item" data-category="installation">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">如何将MSRM3设置为系统服务，开机自启动？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>将MSRM3设置为系统服务的方法如下：</p>
              <h4 class="font-bold mt-3 mb-2">Windows系统：</h4>
              <ol class="list-decimal ml-6 space-y-1">
                <li>以管理员身份运行命令提示符</li>
                <li>执行命令：<code class="bg-gray-100 px-2 py-1 rounded">sc create MSRM3 binPath= "C:\Program Files\MSRM3\MSRM3.exe" start= auto</code></li>
                <li>执行命令：<code class="bg-gray-100 px-2 py-1 rounded">sc start MSRM3</code> 启动服务</li>
              </ol>
              <h4 class="font-bold mt-3 mb-2">Linux系统：</h4>
              <ol class="list-decimal ml-6 space-y-1">
                <li>创建systemd服务文件：<code class="bg-gray-100 px-2 py-1 rounded">sudo nano /etc/systemd/system/msrm3.service</code></li>
                <li>在文件中添加以下内容：<br>
                  <code class="bg-gray-100 px-2 py-1 rounded">[Unit]<br>Description=MSRM3 Network Management System<br>After=network.target<br><br>[Service]<br>ExecStart=/path/to/msrm3/MRM3-linux-x64-v3.25.920.1<br>Restart=always<br>User=root<br><br>[Install]<br>WantedBy=multi-user.target</code></li>
                <li>保存并退出编辑器</li>
                <li>执行命令：<code class="bg-gray-100 px-2 py-1 rounded">sudo systemctl daemon-reload</code></li>
                <li>执行命令：<code class="bg-gray-100 px-2 py-1 rounded">sudo systemctl enable msrm3</code> 设置开机自启动</li>
                <li>执行命令：<code class="bg-gray-100 px-2 py-1 rounded">sudo systemctl start msrm3</code> 启动服务</li>
              </ol>
            </div>
          </div>
          
          <!-- 基础操作问题 -->
          <div class="faq-item" data-category="basic">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">如何修改MSRM3的监听端口？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>修改MSRM3监听端口的步骤如下：</p>
              <ol class="list-decimal ml-6 mt-2 space-y-1">
                <li>登录MSRM3管理界面</li>
                <li>点击左侧菜单栏的"系统设置"选项</li>
                <li>在"网络设置"页面中，找到"监听端口"设置项</li>
                <li>修改端口号（默认为8888）</li>
                <li>点击"保存"按钮</li>
                <li>重启MSRM3服务使配置生效</li>
                <li>使用新端口访问MSRM3：<code class="bg-gray-100 px-2 py-1 rounded">http://localhost:新端口号</code></li>
              </ol>
            </div>
          </div>
          
          <div class="faq-item" data-category="basic">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">忘记管理员密码怎么办？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>如果您忘记了管理员密码，可以通过以下方式重置：</p>
              <h4 class="font-bold mt-3 mb-2">Windows系统：</h4>
              <ol class="list-decimal ml-6 space-y-1">
                <li>停止MSRM3服务</li>
                <li>找到MSRM3安装目录下的<code class="bg-gray-100 px-2 py-1 rounded">config.json</code>文件</li>
                <li>用记事本打开该文件</li>
                <li>找到<code class="bg-gray-100 px-2 py-1 rounded">admin_password</code>字段，将其值修改为新密码的MD5哈希值</li>
                <li>保存文件并重启MSRM3服务</li>
                <li>使用新密码登录</li>
              </ol>
              <h4 class="font-bold mt-3 mb-2">Linux系统：</h4>
              <ol class="list-decimal ml-6 space-y-1">
                <li>停止MSRM3服务：<code class="bg-gray-100 px-2 py-1 rounded">sudo systemctl stop msrm3</code></li>
                <li>找到MSRM3安装目录下的<code class="bg-gray-100 px-2 py-1 rounded">config.json</code>文件</li>
                <li>使用编辑器打开该文件：<code class="bg-gray-100 px-2 py-1 rounded">sudo nano /path/to/msrm3/config.json</code></li>
                <li>找到<code class="bg-gray-100 px-2 py-1 rounded">admin_password</code>字段，将其值修改为新密码的MD5哈希值</li>
                <li>保存文件并退出编辑器</li>
                <li>重启MSRM3服务：<code class="bg-gray-100 px-2 py-1 rounded">sudo systemctl start msrm3</code></li>
                <li>使用新密码登录</li>
              </ol>
              <p class="mt-3">您也可以使用MSRM3提供的密码重置工具，具体请参考安装目录下的说明文档。</p>
            </div>
          </div>
          
          <div class="faq-item" data-category="basic">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">如何添加新的网络设备？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>MSRM3提供了两种添加网络设备的方式：</p>
              <h4 class="font-bold mt-3 mb-2">1. 自动扫描添加</h4>
              <ol class="list-decimal ml-6 space-y-1">
                <li>登录MSRM3管理界面</li>
                <li>点击左侧菜单栏的"网络发现"选项</li>
                <li>在"自动扫描"标签页中，输入要扫描的IP地址范围</li>
                <li>选择扫描方式（ICMP、SNMP、ARP等）</li>
                <li>点击"开始扫描"按钮</li>
                <li>扫描完成后，勾选要添加的设备，点击"添加到拓扑"按钮</li>
              </ol>
              <h4 class="font-bold mt-3 mb-2">2. 手动添加</h4>
              <ol class="list-decimal ml-6 space-y-1">
                <li>登录MSRM3管理界面</li>
                <li>点击左侧菜单栏的"网络拓扑"选项</li>
                <li>点击"手动添加设备"按钮</li>
                <li>填写设备名称、IP地址、设备类型等信息</li>
                <li>如果是可管理设备，还需要填写SNMP信息或其他认证信息</li>
                <li>点击"确定"按钮，添加设备到拓扑图</li>
              </ol>
            </div>
          </div>
          
          <!-- 高级功能问题 -->
          <div class="faq-item" data-category="advanced">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">如何配置告警通知？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>配置MSRM3告警通知的步骤如下：</p>
              <ol class="list-decimal ml-6 mt-2 space-y-1">
                <li>登录MSRM3管理界面</li>
                <li>点击左侧菜单栏的"告警设置"选项</li>
                <li>在"通知方式"页面中，配置各种通知方式：</li>
              </ol>
              <ul class="list-disc ml-10 mt-2 space-y-2">
                <li><span class="font-medium">邮件通知：</span>配置SMTP服务器信息、发件人邮箱、收件人邮箱等</li>
                <li><span class="font-medium">短信通知：</span>配置短信网关信息、手机号等</li>
                <li><span class="font-medium">Webhook通知：</span>配置Webhook URL、请求方式、请求参数等</li>
                <li><span class="font-medium">SNMP Trap通知：</span>配置SNMP Trap接收服务器信息等</li>
              </ul>
              <ol class="list-decimal ml-6 mt-2 space-y-1" start="4">
                <li>在"告警规则管理"页面中，创建或编辑告警规则</li>
                <li>在告警规则设置中，选择要使用的通知方式</li>
                <li>设置告警级别、触发条件、恢复条件等</li>
                <li>点击"保存"按钮，完成告警通知配置</li>
              </ol>
            </div>
          </div>
          
          <div class="faq-item" data-category="advanced">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">如何生成自定义报表？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>生成自定义报表的步骤如下：</p>
              <ol class="list-decimal ml-6 mt-2 space-y-1">
                <li>登录MSRM3管理界面</li>
                <li>点击左侧菜单栏的"报表中心"选项</li>
                <li>在"自定义报表"标签页中，点击"新建报表"按钮</li>
                <li>填写报表名称、描述等基本信息</li>
                <li>选择报表类型（性能报表、流量报表、告警报表等）</li>
                <li>选择要包含的设备和指标</li>
                <li>设置报表的时间范围、生成周期等</li>
                <li>选择报表的格式（PDF、Excel、HTML等）</li>
                <li>设置报表的发送方式（邮件发送、本地保存等）</li>
                <li>点击"保存"按钮，创建自定义报表</li>
                <li>在报表列表中，可以点击"立即生成"按钮生成报表</li>
              </ol>
            </div>
          </div>
          
          <div class="faq-item" data-category="advanced">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">如何备份和恢复MSRM3的配置？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>备份和恢复MSRM3配置的步骤如下：</p>
              <h4 class="font-bold mt-3 mb-2">备份配置：</h4>
              <ol class="list-decimal ml-6 space-y-1">
                <li>登录MSRM3管理界面</li>
                <li>点击左侧菜单栏的"系统设置"选项</li>
                <li>在"备份恢复"页面中，点击"备份配置"按钮</li>
                <li>系统会自动生成配置备份文件，并提供下载链接</li>
                <li>点击下载链接，将配置备份文件保存到本地</li>
              </ol>
              <h4 class="font-bold mt-3 mb-2">恢复配置：</h4>
              <ol class="list-decimal ml-6 space-y-1">
                <li>登录MSRM3管理界面</li>
                <li>点击左侧菜单栏的"系统设置"选项</li>
                <li>在"备份恢复"页面中，点击"选择文件"按钮</li>
                <li>选择之前备份的配置文件</li>
                <li>点击"恢复配置"按钮</li>
                <li>系统会提示恢复成功，并要求重启MSRM3服务</li>
                <li>重启MSRM3服务，使恢复的配置生效</li>
              </ol>
              <p class="mt-3">建议定期备份MSRM3配置，以防止配置丢失。</p>
            </div>
          </div>
          
          <!-- 故障排除问题 -->
          <div class="faq-item" data-category="troubleshooting">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">MSRM3启动后，无法访问管理界面怎么办？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>如果MSRM3启动后无法访问管理界面，可以尝试以下解决方法：</p>
              <ol class="list-decimal ml-6 mt-2 space-y-1">
                <li>检查MSRM3服务是否正常运行</li>
                <li>确认访问的IP地址和端口号是否正确</li>
                <li>检查防火墙设置，确保MSRM3使用的端口已开放</li>
                <li>尝试使用不同的浏览器访问</li>
                <li>查看MSRM3的日志文件，查找可能的错误信息</li>
                <li>尝试重启MSRM3服务</li>
                <li>如果问题仍然存在，可以尝试重新安装MSRM3</li>
              </ol>
              <p class="mt-3">如果以上方法都无法解决问题，请联系MSRM3技术支持获取帮助。</p>
            </div>
          </div>
          
          <div class="faq-item" data-category="troubleshooting">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">为什么无法发现某些网络设备？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>无法发现某些网络设备的可能原因和解决方法：</p>
              <ul class="list-disc ml-6 mt-2 space-y-2">
                <li><span class="font-medium">网络连通性问题：</span>检查设备和MSRM3服务器之间的网络连通性</li>
                <li><span class="font-medium">SNMP配置问题：</span>确认设备的SNMP服务已启用，且团体名或认证信息正确</li>
                <li><span class="font-medium">防火墙设置问题：</span>检查设备的防火墙设置，确保SNMP端口（默认161）已开放</li>
                <li><span class="font-medium">扫描范围问题：</span>确认设备的IP地址在扫描范围内</li>
                <li><span class="font-medium">设备类型不支持：</span>某些特殊类型的设备可能需要特定的发现方法</li>
                <li><span class="font-medium">扫描方式问题：</span>尝试使用不同的扫描方式（ICMP、SNMP、ARP等）</li>
              </ul>
              <p class="mt-3">如果仍然无法发现设备，可以尝试使用手动添加的方式添加设备。</p>
            </div>
          </div>
          
          <div class="faq-item" data-category="troubleshooting">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">MSRM3占用的系统资源过高怎么办？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>如果MSRM3占用的系统资源过高，可以尝试以下优化方法：</p>
              <ul class="list-disc ml-6 mt-2 space-y-2">
                <li><span class="font-medium">减少监控设备数量：</span>根据实际需要，减少同时监控的设备数量</li>
                <li><span class="font-medium">调整监控周期：</span>适当延长监控周期，减少监控频率</li>
                <li><span class="font-medium">减少监控指标：</span>只监控必要的指标，关闭不必要的监控项</li>
                <li><span class="font-medium">优化数据存储：</span>调整历史数据保留策略，定期清理过期数据</li>
                <li><span class="font-medium">升级硬件：</span>如果条件允许，考虑升级服务器硬件配置</li>
                <li><span class="font-medium">检查是否有异常设备：</span>某些异常设备可能会导致MSRM3频繁连接，增加资源消耗</li>
                <li><span class="font-medium">更新到最新版本：</span>新版本可能会包含性能优化</li>
              </ul>
              <p class="mt-3">如果资源占用仍然过高，建议联系MSRM3技术支持获取进一步的帮助。</p>
            </div>
          </div>
          
          <!-- 其他问题 -->
          <div class="faq-item" data-category="other">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">MSRM3是否支持多语言？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>是的，MSRM3支持多语言，包括：</p>
              <ul class="list-disc ml-6 mt-2 space-y-1">
                <li>简体中文</li>
                <li>繁体中文</li>
                <li>英语</li>
                <li>日语</li>
                <li>韩语</li>
                <li>西班牙语</li>
                <li>法语</li>
                <li>德语</li>
              </ul>
              <p class="mt-3">您可以在MSRM3管理界面的"系统设置" - "基本设置"页面中切换界面语言。</p>
            </div>
          </div>
          
          <div class="faq-item" data-category="other">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">如何获取MSRM3的技术支持？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>获取MSRM3技术支持的方式：</p>
              <ul class="list-disc ml-6 mt-2 space-y-2">
                <li><span class="font-medium">在线帮助文档：</span>登录MSRM3管理界面，点击右上角的"帮助"按钮</li>
                <li><span class="font-medium">邮件支持：</span>发送邮件至 <a href="mailto:support@msrm3.com" class="text-primary hover:underline">support@msrm3.com</a></li>
                <li><span class="font-medium">电话支持：</span>400-123-4567（工作日9:00-18:00）</li>
                <li><span class="font-medium">在线客服：</span>访问MSRM3官网，点击右下角的在线客服按钮</li>
                <li><span class="font-medium">社区论坛：</span>访问MSRM3社区论坛，与其他用户交流经验</li>
                <li><span class="font-medium">企业版用户：</span>可以获取专属技术支持和上门服务</li>
              </ul>
            </div>
          </div>
          
          <div class="faq-item" data-category="other">
            <div class="faq-question flex justify-between items-center cursor-pointer">
              <h3 class="text-xl font-bold text-gray-800">MSRM3的开源版本和商业版本有什么区别？</h3>
              <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
            </div>
            <div class="faq-answer mt-4 text-gray-600 hidden">
              <p>MSRM3开源版本和商业版本的主要区别：</p>
              <table class="w-full border-collapse mt-2">
                <thead>
                  <tr>
                    <th class="border border-gray-300 p-2 text-left">功能/服务</th>
                    <th class="border border-gray-300 p-2 text-left">开源版本</th>
                    <th class="border border-gray-300 p-2 text-left">商业版本</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="border border-gray-300 p-2">基础网络拓扑管理</td>
                    <td class="border border-gray-300 p-2">√</td>
                    <td class="border border-gray-300 p-2">√</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-300 p-2">基础监控告警</td>
                    <td class="border border-gray-300 p-2">√</td>
                    <td class="border border-gray-300 p-2">√</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-300 p-2">高级监控功能</td>
                    <td class="border border-gray-300 p-2">×</td>
                    <td class="border border-gray-300 p-2">√</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-300 p-2">报表功能</td>
                    <td class="border border-gray-300 p-2">基础</td>
                    <td class="border border-gray-300 p-2">高级</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-300 p-2">用户管理</td>
                    <td class="border border-gray-300 p-2">基础</td>
                    <td class="border border-gray-300 p-2">完善</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-300 p-2">技术支持</td>
                    <td class="border border-gray-300 p-2">社区支持</td>
                    <td class="border border-gray-300 p-2">专业技术支持</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-300 p-2">更新频率</td>
                    <td class="border border-gray-300 p-2">较慢</td>
                    <td class="border border-gray-300 p-2">较快</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-300 p-2">企业级特性</td>
                    <td class="border border-gray-300 p-2">×</td>
                    <td class="border border-gray-300 p-2">√</td>
                  </tr>
                </tbody>
              </table>
              <p class="mt-3">详细的功能对比，请访问<a href="/features" class="text-primary hover:underline">功能模块</a>页面。</p>
            </div>
          </div>
        </div>
        
        <!-- 没有找到答案 -->
        <div class="mt-12 bg-gray-50 rounded-xl p-8 border border-gray-100 text-center">
          <h3 class="text-xl font-bold mb-4">没有找到您需要的答案？</h3>
          <p class="text-gray-600 mb-6 max-w-2xl mx-auto">
            如果您在常见问题中没有找到您需要的答案，请联系我们的技术支持团队，我们将竭诚为您服务。
          </p>
          <div class="flex flex-wrap justify-center gap-4">
            <a href="/about#contact" class="btn-primary">
              <i class="fa fa-envelope mr-2"></i>联系我们
            </a>
            <a href="/download" class="bg-white text-primary border border-primary px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-gray-50">
              <i class="fa fa-download mr-2"></i>下载最新版本
            </a>
          </div>
        </div>
      </div>
    </section>
    
  `;
  
  // 创建页脚
  const footer = Footer();
  
  // 组装页面
  faqPage.appendChild(contentContainer);
  faqPage.appendChild(footer);
  
  // FAQ问题切换功能
  const faqItems = contentContainer.querySelectorAll('.faq-item');
  faqItems.forEach(item => {
    const question = item.querySelector('.faq-question');
    const answer = item.querySelector('.faq-answer');
    const icon = item.querySelector('.fa-chevron-down');
    
    question.addEventListener('click', () => {
      // 切换当前问题的展开状态
      answer.classList.toggle('hidden');
      icon.style.transform = answer.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
    });
  });
  
  // 分类筛选功能
  const categoryBtns = faqPage.querySelectorAll('.faq-category-btn');
  categoryBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const category = btn.getAttribute('data-category');
      
      // 移除所有按钮的活动状态
      categoryBtns.forEach(b => {
        b.classList.remove('active');
      });
      
      // 添加当前按钮的活动状态
      btn.classList.add('active');
      
      // 筛选问题
      faqItems.forEach(item => {
        if (category === 'all' || item.getAttribute('data-category') === category) {
          item.style.display = 'block';
        } else {
          item.style.display = 'none';
        }
      });
    });
  });
  
  // 搜索功能
  const searchInput = faqPage.querySelector('#faq-search');
  searchInput.addEventListener('input', () => {
    const searchTerm = searchInput.value.toLowerCase();
    
    faqItems.forEach(item => {
      const question = item.querySelector('.faq-question h3').textContent.toLowerCase();
      const answer = item.querySelector('.faq-answer').textContent.toLowerCase();
      
      if (question.includes(searchTerm) || answer.includes(searchTerm)) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  });
  
  return faqPage;
}

export default FAQ;